<template>
	<div class="maskCenter">
		<div :class="visible ? 'businessDialog' : 'businessDialog-hide'">
			<div class="dialog-header" v-winmove>
				<span>签名</span>
				<span class="icon iconfont iconbiaoqianlan-guanbi" @click="close"></span>
			</div>
			<div class="dialog-body">
				<canvas ref="canvasF" :width="width" :height="height" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp" @mouseout="mouseOut"></canvas>				
			</div>
		<div class="dialog-footer right">
				<span class="businessButtonCancel" style="margin-right: 20px" @click="clear">清除</span
        >
        <span
          class="businessButtonCancel"
          style="margin-right: 20px"
          @click="close"
          >取消</span
        >
        <span
          :class="[
            !isBrowse
              ? 'businessButtonConfirm'
              : 'businessButtonConfirm disabled',
          ]"
          @click="okclick"
          >确定</span
        >
      </div>
    </div>
  </div>
</template>


<script>
import winmove from "@/directives/winmove";
import { uploadImage ,execApi,fpglreadPic} from "@/system/api/cellView.js";
export default {
  name: "winSign",
  directives: {
    winmove,
  },
  components: {},
  props: { 
  	fileList: { default: null },
  	isBrowse:{default: false}
  },
  data() {
    return {   	
      	visible:true,
      	press: false,
		canvas: null,
		context: null,
		lastPoint: { x: undefined, y: undefined },
		newPoint: { x: undefined, y: undefined },
		eraserOn: false,
		furl:null,
		img:null,
		width:480,
		height:132,
    };
  },
  methods: {        
    close() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");       
      }, 400);
    },
    okclick() {
    	if(!this.isBrowse){
    		this.img = this.canvas.toDataURL("image/png");
    		this.uploadImage(this.img);     
    	}    	 	
    },
    imgToCanvas(){
    	var ctx = this.canvas.getContext("2d");
    	var img = new Image();
//  	img.setAttribute("crossOrigin",'anonymous');
    	img.src = this.api + this.furl;
//  	var canvas2 = document.createElement("canvas");
//		var cxt2 = canvas2.getContext("2d");
//		cxt2.drawImage(img, 0, 0, this.width, this.height);
//  	var imgData = cxt2.getImageData(0,0,this.width, this.height);
//  	ctx.putImageData(imgData,0,0);
    	ctx.drawImage(img, 0, 0, this.width, this.height);	
    },
	dataURLToBlob(base64Data){
		var byteString;
	    if (base64Data.split(',')[0].indexOf('base64') >= 0)
	        byteString = atob(base64Data.split(',')[1]);
	    else
	        byteString = unescape(base64Data.split(',')[1]);
	    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
	    var ia = new Uint8Array(byteString.length);
	    for (var i = 0; i < byteString.length; i++) {
	        ia[i] = byteString.charCodeAt(i);
	    }
//	    return new Blob([ia], {type: mimeString});
		return new File([ia],'a', {type: mimeString});
	},
    clear(){
    	if(!this.isBrowse){
	    	this.context.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
//	    	if(this.furl){
//	    		let  turl = this.api +  this.furl.replace('download','deleteFile');        
//		        execApi(turl,{}).then((res)=>{ 
//		        	if(res.success){        		
//		        		this.furl = null;
//		        	}else{
//		        		
//		        	}
//		        })
//	    	}  
    	}
    },
    initCanvas(){  			
		this.canvas = this.$refs.canvasF;		
		this.context = this.canvas.getContext('2d');		
		this.context.strokeStyle = "black"			
	},
	mouseDown(xyz) { 
  		var x = xyz.offsetX//xyz.pageX - xyz.target.offsetLeft + document.documentElement.scrollLeft;
        var y = xyz.offsetY//xyz.pageY - xyz.target.offsetTop + document.documentElement.scrollTop;
        this.press = true;
        if (this.eraserOn) {
            this.context.clearRect(x - 10, y - 10, 20, 20);
        }
        else {
            this.lastPoint = { x: x, y: y }
        }
    },
    mouseMove(xyz) {	    	
    	var x = xyz.offsetX//xyz.pageX - xyz.target.offsetLeft + document.documentElement.scrollLeft;
	    var y = xyz.offsetY//xyz.pageY - xyz.target.offsetTop + document.documentElement.scrollTop;
	    if (!this.press) {
	       return;
	    }
	    if (this.eraserOn) {
	       this.context.clearRect(x - 5, y - 5, 10, 10);
	    }
	    else {	        	
	      this.newPoint = { x: x, y: y }
	      this.drawLine(this.lastPoint.x, this.lastPoint.y, x, y);
	      this.lastPoint = this.newPoint;
	    }   	
    },
    mouseUp(xyz) {	    	
      this.press = false;  
    },
    drawLine(x1, y1, x2, y2) {	    	
	    this.context.beginPath();
	    this.context.lineWidth = 4;
	    this.context.moveTo(x1, y1);
	    this.context.lineTo(x2, y2);
	    this.context.lineCap = 'round';
			this.context.lineJoin = 'round';
	    this.context.stroke();
	    this.context.closePath();
		},
    mouseOut(xyz){
    	this.press = false;  	
    },
    uploadImage(file){    	
      	let formData = new FormData();
      	formData.append("imagedata", file);
      	formData.append("isbase64", 1);      	
      	uploadImage(formData).then((res) => {
      		if(res.success){
      			this.furl = res.info;
      			setTimeout(() => {
		        	this.$emit("ok", this.furl);
		        	this.visible = false;
		      	}, 400);
      		}else{      			
      			
      		}
      	});      	
    },
    
  },
  created: function () {
  	  	
  },
  mounted: function () {
  	this.initCanvas();
    if (this.fileList) {
    	this.furl = this.fileList;
      	this.imgToCanvas(); 
    }
    
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: calc(100% - 112px);
  padding: 16px 16px 0 16px;
}
canvas{
	border: 1px solid #90A2AF;
}
.footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 64px;
  padding: 16px;
}
</style>